<!--
 * @Description: 
 * @Date: 2024-05-15 09:41:30
 * @LastEditTime: 2024-08-27 16:13:49
-->
<route lang="json5">
{
  style: {
    navigationBarTitleText: '案件查询',
  },
}
</route>
<template>
  <view class="caseQuery bg-#F4F5F9 p-30rpx w-screen h-screen box-border">
    <wd-form ref="form" :model="model" :rules="rules">
      <view class="mb-20rpx rounded-20rpx overflow-hidden">
        <wd-picker
          label="主体身份"
          placeholder="请选择主体身份"
          label-width="100px"
          prop="applicantType"
          v-model="model.applicantType"
          :columns="promotionlist"
        />
      </view>
      <view class="mb-20rpx">
        <view class="text-#878787 pb-20rpx">被查询人信息</view>
        <view class="rounded-20rpx overflow-hidden">
          <wd-input
            label="被查询人"
            label-width="100px"
            prop="partyName"
            clearable
            v-model="model.partyName"
            placeholder="请输入被查询人"
          />
          <wd-input
            label="身份证号"
            label-width="100px"
            prop="partyCard"
            clearable
            v-model="model.partyCard"
            placeholder="请输入身份证号"
          />
        </view>
      </view>

      <view class="mb-20rpx">
        <view class="text-#878787 pb-20rpx">申请人信息</view>
        <view class="rounded-20rpx overflow-hidden">
          <wd-input
            label="申请人"
            label-width="100px"
            prop="applicant"
            clearable
            v-model="model.applicant"
            placeholder="请输入申请人"
          />
          <wd-input
            label="手机号码"
            label-width="100px"
            prop="applicantPhone"
            clearable
            v-model="model.applicantPhone"
            placeholder="请输入手机号码"
          />
        </view>
      </view>
      <view class="mb-20rpx">
        <view class="text-#878787 pb-20rpx">上传相关材料（图片）（选填）：</view>
        <view class="rounded-20rpx overflow-hidden p-0 box-border bg-#fff">
          <wd-cell title="图片" title-width="80rpx" prop="fileList">
            <wd-upload
              :file-list="model.fileList"
              multiple
              name="file"
              image-mode="aspectFill"
              :action="action"
              class="bg-#fff"
              @change="handleFileChange"
              @success="handleChange"
            ></wd-upload>
          </wd-cell>
        </view>
      </view>
      <view class="footer" @click="submitHandler">
        <wd-button class="bg-#0A4484" type="primary" size="large" block>提交</wd-button>
      </view>
      <wd-toast @opened="handelOpened" />
    </wd-form>
    <wd-toast />
  </view>
</template>
<script setup lang="ts">
import { debounce } from '@/utils/index'
import { isArray } from 'wot-design-uni/components/common/util'
import { FormRules } from 'wot-design-uni/components/w-d-form/src/types'
import { useToast } from 'wot-design-uni'
import { useUserStore } from '@/store'
import { postRecordAPI } from '@/service/index/foo'
import _ from 'lodash'
const action: string = import.meta.env.VITE_SERVER_BASEURL + '/app-api/infra/file/upload-id'
// 表单提交属性
const userStore = useUserStore()
const model = reactive<{
  applicantType: string
  applicant: string
  applicantPhone: string
  partyName: string
  partyCard: string
  files: string[]
  fileList: Record<string, string>[]
  status: number
  businessType: string
  // roleId: number
}>({
  applicantType: '',
  applicant: '',
  applicantPhone: '',
  partyName: '',
  partyCard: '',
  files: [],
  fileList: [],
  status: 1,
  businessType: 'anJian',
  // roleId: userStore.userInfo.zhuanId,
})
const toast = useToast()

// 表单ref
const form = ref()
// 表单验证规则
const rules: FormRules = {
  applicantType: [
    {
      required: true,
      message: '请选择主体身份',
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请选择主体身份')
        }
      },
    },
  ],
  partyName: [
    {
      required: true,
      message: '请输入被查询人',
      pattern: /^[\u4e00-\u9fa5]+$/,
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入被查询人')
        }
      },
    },
  ],
  partyCard: [
    {
      required: true,
      message: '请输入正确的身份证号',
      pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\d|X|x]$/,
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入身份证号')
        }
      },
    },
  ],
  applicant: [
    {
      required: true,
      message: '请输入申请人',
      pattern: /^[\u4e00-\u9fa5]+$/,
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入申请人')
        }
      },
    },
  ],
  applicantPhone: [
    {
      required: true,
      message: '请输入正确的手机号',
      pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
      validator: (value) => {
        if (value) {
          return Promise.resolve()
        } else {
          return Promise.reject('请输入手机号')
        }
      },
    },
  ],
  fileList: [
    {
      required: true,
      message: '请选择活动图片',
      validator: (value) => {
        if (isArray(value) && value.length) {
          return Promise.resolve()
        } else {
          return Promise.reject()
        }
      },
    },
  ],
}
// 主体身份
const promotionlist = ref<any[]>([
  {
    value: '1',
    label: '当事人',
  },
  {
    value: '2',
    label: '当事人法定代理人',
  },
  {
    value: '3',
    label: '当事人近亲属',
  },
  {
    value: '4',
    label: '辩护人',
  },
])

function handleChange({ file }) {
  const { data } = JSON.parse(file.response)
  model.files.push(data)
}
function handleFileChange({ fileList }) {
  model.fileList = fileList
}
// function once(fn) {
// 	let executed = false;
// 	return function() {
// 		if(!executed) {
// 			executed = true;
// 			fn.apply(this.arguments);
// 		}
// 	};
// }
const submitHandler = _.debounce(() => {
  handleSubmit()
}, 1000)
// 表单提交
function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        try {
          postRecordAPI({
            ...model,
            fileList: undefined,
            files: [...model.files],
            openId: userStore.userInfo.openid,
          }).then((res) => {
            if (res.code == 0) {
              toast.success({
                msg: '操作成功',
                duration: 0,
              })
            } else {
              toast.error({
                msg: res.msg,
                duration: 0,
              })
            }

            setTimeout(() => {
              uni.navigateBack()
              toast.close()
            }, 1500)
          })
        } catch (error) {
          console.log(error)
        }
      } else {
        console.log(errors)
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
function handelOpened() {
  console.log('关闭')
}
</script>
<style lang="scss" scoped>
.footer {
  padding: 12px;
}

::v-deep .wd-upload {
  background: #fff;
}

::v-deep .wd-upload__evoke {
  margin-bottom: 0;
}

::v-deep .wd-button {
  background: #0a4484 !important;
}
</style>
